<template>
	<view class="user-container">
		<view class="header">
			<image src="../../static/img/user-bg.png" mode="" class="user-bg"></image>
			<view class="nav">


				<view class="user" v-if="!token">
					<u-avatar size="70" :src="'../../static/img/defaultPhoto.jpg'"></u-avatar>
					<text>请登录！</text>
				</view>

				<view class="user" @click="gotoUrl('/pages/maintainUserInfo/index')" v-else-if="token&&!userInfo">
					<u-avatar size="70" :src="'../../static/img/defaultPhoto.jpg'"></u-avatar>
					<text>{{userPhone}}</text>
					<view class="editor">
						完善用户信息
						<image class="image" src="../../static/img/edit.png" mode=""></image>
					</view>
				</view>
				<view class="user" v-else="userInfo">
					<u-avatar size="70" :src="userInfo.userPhoto"></u-avatar>

					<text>{{ userInfo.userName }}</text>
				</view>
			</view>
			<view class="vip">
				<image src="/static/img/vip-card.png" class="vip_bg"></image>
				<view class="vipname">
					<image src="../../static/img/qb.png" mode="" style="width: 20px;height: 20px;"></image>
					<text class="desc">
						账户余额：
					</text>
					<text class="money">
						￥{{userBalance}}
					</text>
				</view>
				<view class="recharge"  @click="gotoUrl('/pages/rechargeAmount/index') " >
					<text>去充值</text>
					<image src="../../static/img/recharge.png" mode=""></image>
				</view>

			</view>
		</view>
		<view class="user-menu">
			<image src="/static/img/arc.png" class="arc"></image>
			<view class="menu" @click="gotoUrl('/pages/maintainUserInfo/index') ">
				<view class="left">
					<image src="../../static/img/info.png" mode="" class="menu-icon"></image>
					<text class="menu-text">我的个人信息</text>
				</view>

				<image src="../../static/img/more.png" mode="" class="menu-icon"></image>
			</view>
			<view class="menu" @click=" gotoUrl('/pages/myOrder/index') ">
				<view class="left">
					<image src="../../static/img/order.png" mode="" class="menu-icon"></image>
					<text class="menu-text">我的帮单</text>
				</view>

				<image src="../../static/img/more.png" mode="" class="menu-icon"></image>
			</view>
			<view class="menu" @click=" gotoUrl('/pages/mySecondHandMarket/index') ">
				<view class="left">
					<image src="../../static/img/second.png" mode="" class="menu-icon"></image>
					<text class="menu-text">我的跳蚤市场</text>
				</view>

				<image src="../../static/img/more.png" mode="" class="menu-icon"></image>
			</view>
			<view class="menu" @click=" gotoUrl('/pages/lostAndFind/index') ">
				<view class="left">
					<image src="../../static/img/sw.png" mode="" class="menu-icon"></image>
					<text class="menu-text">我的失物招领</text>
				</view>

				<image src="../../static/img/more.png" mode="" class="menu-icon"></image>
			</view>
			<!-- <view class="menu">
				<view class="left">
					<image src="../../static/img/jyjl.png" mode="" class="menu-icon"></image>
					<text class="menu-text">我的交易记录</text>
				</view>

				<image src="../../static/img/more.png" mode="" class="menu-icon"></image>
			</view> -->
			<view class="button">
				<u-button text="退出登录" shape="circle" @click="logout"
					color="linear-gradient(135.00deg, rgba(118,118,238,1.00) 0.321%,rgba(138,138,238,1.00) 100%)"
					v-if="token">
				</u-button>
				<u-button text="立即登录" shape="circle" @click="gotoUrl('/pages/login/index')"
					color="linear-gradient(135.00deg, rgba(118,118,238,1.00) 0.321%,rgba(138,138,238,1.00) 100%)"
					v-if="!token">
				</u-button>
			</view>
		</view>

		<tabbar :pagePath="'pages/my/index'"></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: this.$store.getters?.userInfo?.userInfoDetail || null,
				userBalance: 0,
				token: this.$store.getters?.userInfo?.token || null,
				userPhone: this.$store.getters?.userInfo?.userPhone || null,
			}
		},
		onLoad() {
			uni.hideTabBar();
			if (this.userInfo) {
				this.getUserBalance()
			}

		},
		methods: {

			getUserBalance() {
				this.$http('get',
					`api/private/userBalance/getUserBalanceInfo?userId=${this.userInfo.uid}`, {

						success: (res) => {
							this.userBalance = res.userBalance
						},

					})
			},
			gotoUrl(url) {

				if (!this.userInfo) {
					uni.navigateTo({
						url: '/pages/login/index'
					})
				}
				uni.navigateTo({
					url
				})
			},

			reload() {
				this.userInfo = this.$store.getters?.userInfo?.userInfoDetail || null
			},
			logout() {
				this.$store.dispatch('setLoginOut')
			},


		}
	}

</script>

<style lang="scss">
	.user-container {
		height: 100vh;

	}

	.header {
		height: 400rpx;
		background: linear-gradient(135.00deg, rgba(118, 118, 238, 1.00) 0.321%, rgba(138, 138, 238, 1.00) 100%);
		position: relative;
		padding: 2.1875rem 4%;
	}


	.user-bg {
		height: 100%;
		width: 100%;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
	}

	.nav {
		height: 180rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.user {
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		overflow: hidden;
		z-index: 200;
		margin-bottom: 20rpx;

	}

	.user image {
		width: 130rpx;
		height: 130rpx;
		flex-shrink: 0;
		border-radius: 50%;
	}

	.user text {
		font-size: 38rpx;
		color: #fff;
		margin-left: 20rpx;
	}

	.vip {
		height: 240rpx;
		position: relative;
		display: flex;
		padding: 20rpx 24rpx;
		border-radius: 16rpx 16rpx 0 0;
		overflow: hidden;
	}

	.vip .vip_bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.vipname {
		z-index: 5;
		display: flex;
		height: 60rpx;
		position: relative;
		align-items: center;
	}



	.vipname .desc,
	.money {
		color: #f6e5a3;
		line-height: 20rpx;
		font-size: 18px;
		margin-left: 15rpx;
	}

	.desc {
		color: #fff !important;
		font-size: 14px !important;
	}

	.user-menu {
		margin-top: -178rpx;
		position: relative;
		background-color: #f8f8f8;
		padding: 0 4% 10rpx;
		height: calc(100% - 210px);
		padding-top: 10px;
	}

	.user-menu .arc {
		width: 100%;
		height: 36rpx;
		position: absolute;
		top: -34rpx;
		left: 0;
	}

	.menu {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50px;
		box-shadow: 0px 0px 17rpx 1rpx rgba(206, 206, 206, 0.32);
		border-radius: 8px;
		padding: 0 10px;
		margin-bottom: 15px;

		.left {
			display: flex;
			align-items: center;
		}

		.menu-icon {
			width: 18px;
			height: 18px;
		}

		.menu-text {
			font-size: 16px;
			color: #333333;
			margin-left: 10px;
		}
	}


	.editor {
		border-radius: 20px;
		border: 1px solid #f8f8f8;
		display: flex;
		align-items: center;
		font-size: 14px;
		color: #fff;
		padding: 6px 10px;
		position: absolute;
		right: 25px;

		.image {
			width: 16px;
			height: 16px;
			margin-left: 10px;
			border-radius: initial;
			border: initial;
		}

	}

	.button {
		margin-top: 60px;
	}

	.recharge {
		border: 1px solid #f6e5a3;
		display: flex;
		align-items: center;
		color: #f6e5a3;
		position: absolute;
		right: 15px;
		border-radius: 20px;
		padding: 2px 8px;
		font-size: 14px;

		image {
			width: 24px;
			height: 24px;
		}
	}

</style>

